<template>
	<div :style="wrapStyle">
		<div class="panel-header-box" :style="headerStyle">
			<div class="panel-header" v-html="header">
				
			</div>
			<div v-if="$slots.action" class="panel-action">
				<slot name="action"></slot>
			</div>
		</div>
		<div class="panel-content" :style="contentStyle">
			<slot></slot>
		</div>
	</div>
</template>
<script>
	export default {
		props: ['header', 'scroll', 'headerStyle'],
		computed: {
			wrapStyle() {
				if (this.scroll) {
					return {height: '100%'}
				}
			},
			contentStyle() {
				if (this.scroll) {
					return {
						height: 'calc(100% - 46px)',
						overflow: 'auto'
					}
				}
			}
		}
	}
</script>
<style>
	.panel-header-box {
		background: #26C188;
		border: 1px solid #41AE89;
		text-indent: 34px;
		color: #ffffff;
		line-height: 32px;
		font-size: 16px;
		overflow: hidden;
	}
	.panel-header {
		float: left;
	}
	.panel-action {
		float: right;
		padding-right: 20px;
	}
	.panel-content {
		border: 1px solid #ddeee8;
		border-top: none;
		padding: 12px 25px 0;
		background-color: #ffffff;
	}

</style>